<template>
  <div class="category-box">
    <AdvertisementO/>
    <div class="category-main">
        <div class="category-list">
            <CategoryScroll :selectedItem="selectedItem" @changeCategory="handleChangeCategory" />
            <CategoryList :category="category" :selectedItem="selectedItem" />
        </div>
        <div class="recommend">
          <Recommend/>
          <AdvertisementTh/>
        </div>
    </div>
  </div>
</template>

<script>
import AdvertisementO from '../main-components/advertisement.vue'
import Recommend from '../main-components/Recommend.vue'
import CategoryScroll from './CategoryScroll.vue'
import CategoryList from './CategoryList.vue'
import AdvertisementTh from './AdvertisementTh.vue'

export default {
  name: 'Category',
  props: {
    selectedItem: {
      type: String,
    }
  },
  data() {
    return {
      category: ""
    }
  },
  components: {
    AdvertisementO, Recommend, CategoryScroll, CategoryList, AdvertisementTh
  },
  methods: {
    handleChangeCategory(item) {
      this.category = item
      // console.log("category" + this.category);
    }
  },
  mounted() {
    // console.log(this.selectedItem);
  }
}
</script>

<style scoped>
.category-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.category-main {
  margin-top: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.recommend {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: sticky;
  top: 70px;
}
</style>